<template>
  <div>
    <el-descriptions class="margin-top" title="个人详细信息展示" :column="3" :size="size" border>
      <template slot="extra">
        <el-button type="primary" size="small" @click="backIndex">返回主页</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号
        </template>
        {{ userDetail.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ userDetail.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          姓名
        </template>
        <el-tag size="small">{{ userDetail.name }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          注册时间
        </template>
        {{ userDetail.createTime }}
      </el-descriptions-item>
      <el-descriptions-item v-if="userDetail.access===1">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          权限
        </template>
        超级管理员
      </el-descriptions-item>

      <el-descriptions-item v-if="userDetail.access===2">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          权限
        </template>
        普通管理员
      </el-descriptions-item>

      <el-descriptions-item v-if="userDetail.access===3">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          权限
        </template>
        普通用户
      </el-descriptions-item>

      <el-descriptions-item v-if="userDetail.state===1">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          状态
        </template>
        正常
      </el-descriptions-item>

      <el-descriptions-item v-if="userDetail.state===0">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          状态
        </template>
        被禁用
      </el-descriptions-item>
    </el-descriptions>
    <el-button type="primary" @click="updateInfo" style="margin-top: 20px;">修改信息</el-button>

    <!-- 添加或者修改的表单 -->
    <el-dialog title="添加或修改人员信息" :visible.sync="addOrUpdateFormShow">
      <!-- <div>物资类型展示</div> -->
      <div>
        <!-- :rules="rules"校验 -->
        <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" hide-required-asterisk
                 label-suffix=":" class="demo-ruleForm">

          <el-form-item label="账号" prop="username">
            <el-input v-model="addForm.username" style="width: 30%"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input show-password v-model="addForm.password" style="width: 20%"></el-input>
          </el-form-item>


          <el-form-item label="姓名" prop="name">
            <el-input v-model="addForm.name" style="width: 30%"></el-input>
          </el-form-item>

          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="addForm.phone" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
            <el-button @click="resetForm('addForm')">重置</el-button>
            <el-button @click="addOrUpdateFormShow = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      newUser: {},
      size: '',
      userDetail: {},
      addOrUpdateFormShow: false,
      //权限选择
      accessOption: [
        {
          id: 1,
          name: '超级管理员'
        },
        {
          id: 2,
          name: '普通管理员'
        },
        {
          id: 3,
          name: '普通用户'
        }
      ],
      user: {},

      //添加表单
      addForm: {},
      deptOption: [
        {
          id: 1,
          name: '测试',
        },
        {
          id: 2,
          name: '开发',
        }
      ],
      rules: {
        name: [
          {required: true, message: '请输入用户姓名', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请设置用户登录账号', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入用户手机号', trigger: 'blur'},
        ],
        access: [
          {required: true, message: '请选择权限', trigger: 'blur'},
        ],
      },
    };
  },

  mounted() {
    const user = JSON.parse(window.sessionStorage.getItem("user"))
    this.detail(user.id)
    this.user = user
  },

  methods: {
    //修改个人信息
    updateInfo() {
      this.addOrUpdateFormShow = true
      this.addForm = this.newUser
      // this.addForm = this.userDetail
      // this.addForm =
    },
    //提交添加或者修改的表单
    submitForm() {
      // console.log(this.addForm)
      this.$http.post("/user/saveOrUpdate", this.addForm).then(res => {
        // console.log(res.data)
        if (res.data.status) {
          this.user = this.addForm
          this.$message.success(res.data.data);
        } else {
          this.$message.error(res.msg);
        }
      })
      this.addOrUpdateFormShow = false
      // this.detail(this.user.id)
    },

    //重置添加表单
    resetForm(formName) {
      console.log(formName)
      this.addForm.username = ''
      this.addForm.password = ''
      this.addForm.name = ''
      this.addForm.phone = ''
      // this.$refs[formName].resetFields();
    },

    backIndex() {
      this.$router.push('/index')
    },
    detail(id) {
      // console.log(value,id)
      this.$http.get("/user/detail/" + id).then(res => {
        console.log(res.data)
        this.userDetail = res.data.data;
        this.newUser = res.data.data
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
